<template>
  <div class="dialog">
    <el-dialog title="题目预览" :visible="isPreviewDialog" @close="addCancel">
      <div class="box">
        <span>
          <p>【题型】:{{ list.questionType }}</p>
        </span>
        <span>
          <p>【编号】:{{ list.id }}</p>
        </span>
        <span>
          <p>【难度】:{{ list.difficulty }}</p>
        </span>
        <span>
          <p>【标签】:{{ list.tags }}</p>
        </span>
      </div>
      <div class="box">
        <span>
          <p>【学科】:{{ list.subject }}</p>
        </span>
        <span>
          <p>【目录】:{{ list.catalog }}</p>
        </span>
        <span>
          <p>【方向】:{{ list.direction }}</p>

        </span></div>
      <hr>
      <div class="tigan">
        <p>【题干】</p>
        <p style="color:blue" v-html="list.question" />
        <p>选项：(以下选中的选项为正确答案)</p>
        <p v-html="list.answer" />
      </div>
      <hr>
      <div>
        <span>【参考答案】</span>
        <el-button v-if="state" type="danger" @click="videoClick">视频答案预览</el-button>
        <video v-else width="320" height="240" controls>
          <source :src="list.videoURL" type="video/mp4">
        </video>
      </div>
      <hr>
      <div class="video">
        <span>【答案解析】</span>
        <span v-html="list.answer" />
      </div>
      <hr>
      <div class="test">
        <span>【题目备注】:{{ list.remarks }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
	name: 'PreviewDialog',
	props: {
		isPreviewDialog: {
			type: Boolean,
			default: false
		},
		rowList: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			list: {}, // 转化父组件传递过来的当前行的数据
			state: true,
			questionType: ''
		}
	},
	watch: {
		rowList(newVal) {
			this.list = newVal
			console.log(this.list);
		}
	},
	methods: {
		addCancel() {
			this.list = {}
			this.$emit('update:isPreviewDialog', false)
		},
		// 点击视频预览按钮，预览视频
		videoClick() {
			this.state = false
			console.log(this.state);
		}
	}

}
</script>

<style lang="scss" scoped>
.box{
	height: 30px;
	width: 100%;
	line-height: 30px;
	vertical-align: middle;
	margin-bottom: 10px;
}

.box span{
	float: left;
	width: 25%;
	height: 30px;
	p{
		display: inline-block;
	}
}
.tigan{
	width: 100%;
}
.test{
	margin-bottom: 10px;
}
::v-deep .el-dialog{
	border-radius: 15px;
}
::v-deep .el-dialog__header{
	background-color:#409eff;
	border-radius: 15px 15px 0 0;

}
::v-deep .el-dialog__title{
	color:#fff;
}
::v-deep .el-dialog__close{
	color:#fff
}

</style>